<template>
  <view-card :title="title">
    <main class="style_main">
      <div class="style_chart" ref="style_chart"></div>
    </main>
  </view-card>
</template>

<script>
  import {option} from "../charts/styleListCharts";
  import api from "@/network/api";
  export default {
    name: "styleList",
    data() {
      return {
        title: '我的风格',
        styleOption: option
      }
    },
    methods:{
      chartInit(){
        let setChart = this.$echarts.init(this.$refs.style_chart);
        option && setChart.setOption(this.styleOption);
      },
      getStyleData(){
        api.getTimeMachine().then(response=>{
          let styleData = response['data']['detail'][0]
              ['data']['listenCommonStyle']['styleDetailList'];
          this.styleOption['yAxis'][0]['data'] = styleData.map(item=>{return item['styleName']});
          this.styleOption['yAxis'][1]['data'] = styleData.map(item=>{return 100*item['percent']});
        });

      }
    },
    mounted() {
      this.chartInit();
      this.getStyleData();
    },
    watch:{
      styleOption:{
        handler(newVal,oldVal){
          this.chartInit()
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
